<template>
  <div>
    <!-- 增加主类 -->
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="margin: 10px 0px"
      @click="dialogFormVisible1 = true"
      >主类管理</el-button
    >
    <!-- 增加副类 -->
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="margin: 10px 10px"
      @click="dialogFormVisible2 = true"
      >添加副类</el-button
    >
    <!-- 显示类 -->
    <el-table style="width: 100%" border :data="list">
      <el-table-column
        type="index"
        label="序号"
        width="80px"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="mainClasses.mainClassName"
        label="主类"
        width="width"
      ></el-table-column>
      <el-table-column
        prop="otherClassName"
        label="副类"
        width="width"
      ></el-table-column>
      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{ row }">
          <el-button type="warning" icon="el-icon-edit" size="mini"
          @click="dialogFormVisible3 = true;
          form.otherClassId=row.otherClassId;
          form.otherClassName=row.otherClassName;
          form.mainClassId=row.mainClassId;
          "
            >修改</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteOtherClass(row.otherClassId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      style="margin-top: 20px; text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="limit"
      layout="sizes, prev, pager, next, total"
      :total="total"
    >
    </el-pagination>
    <!-- 主类管理-->
    <el-dialog title="主类管理" :visible.sync="dialogFormVisible1">
      <el-form :model="form">
        <el-form-item label="主类名称" :label-width="formLabelWidth">
          <el-input v-model="form.mainClassName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="已有主类" :label-width="formLabelWidth">
          <el-select v-model="form.mainClassId" placeholder="查看主类">
            <div v-for="item in mainList" :key="item.mainClassId">
              <el-option
                :label="item.mainClassName"
                :value="item.mainClassId"
              ></el-option>
            </div>
          </el-select>
          <el-button
            type="danger"
            icon="el-icon-delete"
            style="margin-left: 10px"
            @click="deleteMainClass"
            >删除</el-button
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="insertMainClass">创建主类</el-button>
      </div>
    </el-dialog>
    <!-- 增加副类-->
    <el-dialog title="增加副类" :visible.sync="dialogFormVisible2">
      <el-form :model="form">
        <el-form-item label="副类名称" :label-width="formLabelWidth">
          <el-input v-model="form.otherClassName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选择主类" :label-width="formLabelWidth">
          <el-select v-model="form.mainClassId" placeholder="选择主类">
            <div v-for="item in mainList" :key="item.mainClassId">
              <el-option
                :label="item.mainClassName"
                :value="item.mainClassId"
              ></el-option>
            </div>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="insertOtherClass">新建副类</el-button>
      </div>
    </el-dialog>
    <!-- 修改副类-->
    <el-dialog title="修改副类" :visible.sync="dialogFormVisible3">
      <el-form :model="form">
        <el-form-item label="副类名称" :label-width="formLabelWidth">
          <el-input v-model="form.otherClassName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选择主类" :label-width="formLabelWidth">
          <el-select v-model="form.mainClassId" placeholder="选择主类">
            <div v-for="item in mainList" :key="item.mainClassId">
              <el-option
                :label="item.mainClassName"
                :value="item.mainClassId"
              ></el-option>
            </div>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="updateOtherClass">修改副类</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Category",

  data() {
    return {
      page: 1,
      limit: 5,
      total: 0,
      list: [],
      mainList: [],
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      form: {
        mainClassName: "",
        mainClassId: "",
        otherClassName: "",
        otherClassId:""
      },
      formLabelWidth: "120px",
    };
  },

  mounted() {
    this.getOtherClassList();
    this.getMainClassList();
  },

  methods: {
    handleSizeChange(limit) {
      this.limit = limit;
      this.getOtherClassList();
    },
    handleCurrentChange(pager) {
      this.page = pager;
      this.getOtherClassList();
    },
    //获取所有副类
    async getOtherClassList() {
      const { page, limit } = this;
      let result = await this.$API.category.reqOtherClassesList(page, limit);
      if (result.code == 200) {
        this.total = result.data.total;
        this.list = result.data.otherClassesList;
      } else {
        return Promise.reject(new Error("false"));
      }
    },
    //获取所有主类
    async getMainClassList() {
      let result = await this.$API.category.reqMainClassesList();
      if (result.code == 200) {
        this.mainList = result.data;
      } else {
        return Promise.reject(new Error("false"));
      }
    },
    //创建主类
    async insertMainClass() {
      const mainClassName = this.form.mainClassName;
      if (mainClassName) {
        let result = await this.$API.category.reqInsertMainClass(mainClassName);
        if (result.code == 200) {
          this.$message({
            message: result.data,
            type: "success",
          });
          this.dialogFormVisible1 = false;
          this.getMainClassList();
          this.form.mainClassId = "";
          this.form.mainClassName = "";
        } else {
          return Promise.reject(new Error("false"));
        }
      } else {
        this.$message({
          message: "请输入主类名字",
          type: "warning",
        });
      }
    },
    //删除主类
    async deleteMainClass() {
      const mainClassId = this.form.mainClassId;
      if (mainClassId) {
        if (confirm("删除主类会删除绑定的副类和商品,确定要删除吗")) {
          let result = await this.$API.category.reqDeleteMainClass(mainClassId);
          if (result.code == 200) {
            this.$message({
              message: result.data,
              type: "success",
            });
            this.form.mainClassId = "";
            this.form.mainClassName = "";
            this.dialogFormVisible1 = false;
            this.getMainClassList();
          } else {
            return Promise.reject(new Error("false"));
          }
        }
      } else {
        this.$message({
          message: "请选择主类",
          type: "warning",
        });
      }
    },
    //创建副类
    async insertOtherClass() {
      const { otherClassName, mainClassId } = this.form;
      if (otherClassName) {
        let result = await this.$API.category.reqInsertOtherClass(
          mainClassId,
          otherClassName
        );
        if (result.code == 200) {
          this.$message({
            message: result.data,
            type: "success",
          });
          this.dialogFormVisible2 = false;
          this.getOtherClassList();
          this.form.otherClassName = "";
          this.form.mainClassId = "";
        } else {
          return Promise.reject(new Error("false"));
        }
      } else {
        this.$message({
          message: "请输入副类名字",
          type: "warning",
        });
      }
    },
    //删除副类
    async deleteOtherClass(otherClassId) {
      if (confirm("删除副类会删除绑定的商品,确定要删除吗")) {
        let result = await this.$API.category.reqDeleteOtherClass(otherClassId);
        if (result.code == 200) {
          this.$message({
            message: result.data,
            type: "success",
          });
          this.getOtherClassList();
        } else {
          return Promise.reject(new Error("false"));
        }
      }
    },
    //修改副类
    async updateOtherClass() {
      const { otherClassName, mainClassId, otherClassId } = this.form;
      if (otherClassName) {
        let result = await this.$API.category.reqUpdateOtherClass({otherClassId,mainClassId,otherClassName});
        if (result.code == 200) {
          this.$message({
            message: result.data,
            type: "success",
          });
          this.dialogFormVisible3 = false;
          this.getOtherClassList();
          this.form.otherClassName = "";
          this.form.mainClassId = "";
          this.form.otherClassId = "";
        } else {
          return Promise.reject(new Error("false"));
        }
      } else {
        this.$message({
          message: "请输入副类名字",
          type: "warning",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>